<template>
  <!-- vue3 中的组件 可以没有根标签 -->
  <h1>我是APP组件</h1>
  <h2>姓名:{{ xingming }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h2>性别:{{ sex }}</h2>
  <button @click="sayHello">说话</button>
  &nbsp;&nbsp;
  <button @click="sayWelcome">说话</button>
  <br /><br />
  <button @click="test1">测试在vue2中访问vue3</button>
  <br /><br />
  <button @click="test2">测试在vue3中访问vue2</button>
</template>

<script>
// import { h } from "vue";
export default {
  name: "App",
  components: {},
  data() {
    return {
      sex: "女",
    };
  },
  methods: {
    sayWelcome() {
      alert("欢迎来到培立优");
    },
    test1() {
      console.log(this.sex);
      console.log(this.xingming);
      console.log(this.sayHello);
    },
  },
  // 此处测试setup 不考虑响应式
  setup() {
    // 数据
    let name = "张三";
    let age = 18;

    // 方法
    function sayHello() {
      alert(`我叫${name},我${age}岁了`);
    }
    function test2() {
      console.log(this.sex);
      console.log(name);
      console.log(this.sayWelcome);
    }
    //返回对象
    return {
      xingming: name,
      age,
      sayHello,
      test2,
    };

    // 返回渲染函数
    /*return () => {
      h("h1", "培立优");
    };*/
  },
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
